﻿@{
    Layout = "_Layout";
}
<div id="app">
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <el-input v-model="filterName" placeholder="机构名称" style="width:250px;" clearable></el-input>
                <el-button type="primary" v-on:click="loadTable"> 搜索</el-button>
            </div>
        </el-col>
    </el-row>
    <hr class="line-gray" />
    <el-row>
        <div class="table-container">
            <el-table :data="tableData" style="width:100%">
                <el-table-column type="index" width="50" label="编号">

                </el-table-column>
                <el-table-column label="姓名" width="300" property="name">

                </el-table-column>
                <el-table-column label="会员等级" width="230" property="memberLevel">

                </el-table-column>
                <el-table-column label="所属机构" width="100" property="instruction">

                </el-table-column>
                <el-table-column label="学生姓名" width="150" property="student">

                </el-table-column>
                <el-table-column label="注册时间" width="230" >
                    <!--注意此处 scope-slot的使用方法-->
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" v-on:click="course(scope.$index, scope.row)">课程</el-button>
                        <el-button size="mini" type="primary" v-on:click="evaluation(scope.$index, scope.row)">测评</el-button>
                        <el-button size="mini" type="primary" v-on:click="order(scope.$index, scope.row)">订单</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background
                           layout="prev, pager, next"
                           :total="totalCount"
                           :page-size="pageSize"
                           :pager-count="pagerCount"
                           :hide-on-single-page="true"
                           ref="pager">
            </el-pagination>
        </div>
    </el-row>
    <!--会员课程-->
    <el-dialog :title="dialogTitle" :visible.sync="courseVisible" width="700px" v-on:close="resetForm" :close-on-click-modal="false">
        <iframe v-bing:src="courseUrl" style="width:100%;height:100%;">
        </iframe>
    </el-dialog>
    <!--会员订单-->
    <el-dialog :title="dialogTitle" :visible.sync="orderVisible" width="700px" v-on:close="resetForm" :close-on-click-modal="false">
        <iframe v-bing:src="orderUrl" style="width:100%;height:100%;">

        </iframe>
    </el-dialog>
    <!--会员会员测评-->
    <el-dialog :title="dialogTitle" :visible.sync="evaluationVisible" width="700px" v-on:close="resetForm" :close-on-click-modal="false">
        <iframe v-bing:src="evaluationUrl" style="width:100%;height:100%;">

        </iframe>
    </el-dialog>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            currPage: 1,
            totalCount: 0,
            pageSize: 15,
            pagerCount: 5,
            filterName: '',
            formLabelWidth: '100px',
            addDialogVisible: false,
            tableData: [],
            courseVisible: false,
            orderVisible: false,
            evaluationVisible: false,
            courseUrl: '',
            orderUrl: '',
            evaluationUrl: ''
        },
        methods:
        {
            // 查看课程
            course(index, row) {
                // 加载信息，填充 this.instruction对象
                let that = this;
                that.courseUrl = `/memebr/course?id=${row.id}`;
                that.courseVisible = true;
            },
            // 查看测评
            evaluation(index, row) {
                let that = this;
                that.evaluationUrl = `/member/evaluation?id=${row.id}`;
                that.evaluationVisible = true;
            },
            // 查看订单
            order(index.row){
                let that = this;
                that.orderUrl =`/member/order?id=${row.id}`;
                that.orderVisible = true;
            },
            // 加载表格数据
            loadTable() {
                let that = this;
                axios.get(`/api/instruction/get-list?filterName=${that.filterName}&page=${that.currPage}&pageSize=${that.pageSize}`)
                    .then((res) => {
                        that.tableData = res.data.data.list;
                        that.totalCount = res.data.data.totalCount;
                    })
                    .catch((err) => {
                        console.log(err);
                    })
            },
            // 分页组件，当前页面改变
            currentPageChange(page) { 
                let that = this;
                that.currPage = page;
                that.loadTable();
            },
            prevClick() { 
                let that = this;
                if (that.currPage !== 1) {
                    that.currPage -= 1;
                    that.loadTable();
                }
            },
            nextClick() {
                let that = this;
                let pageCount = that.$refs['pager'].pageCount;
                if (that.currPage !== pageCount) {
                    that.currPage -= 1;
                    that.loadTable();
                }
            }
        },
        created() {
            this.loadTable();
        },
        mounted() {

        }
    });
</script>
<style>
</style>
